<template>
<div style="background: rgb(245,240,240); "  >
  <div style="height: 40px;  text-align:center; font-size: 1.2em; background: deepskyblue; line-height:40px;" >
    微信读书
</div>

  <div style="height: 30px; display: flex; justify-content: space-around; margin-top: 2vh;" class="box">
    <van-search style="width:90vw;" v-model="value" placeholder="三体" />

  </div>

  <div style=" display: flex; margin-top: 2vh;">

    <van-button round color="#999999"  v-for="(item,index) in anniu" :key="item" size="small" class="ml-5"  @click="a(index)">{{item}}</van-button>


  </div>

  <div class="border-solid">

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/ydshu/1.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/ydshu/2.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/ydshu/3.png')"/>
      </van-grid-item>

    </van-grid>
  </div>
  <div>
    <span class=“text-align:center”>为你推荐</span>

    <img @click="quxiangqing"  :src="require('@/assets/ydshu/6.png')">
  </div>

  <div>
 <div class="px-4"><van-button round type="success" size="large" color="#999999" style="height: 40px;">换一批</van-button></div>
    </div>
  <div>
    <span class=“text-align:center”>每日福利</span>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/ydshu/4.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/ydshu/5.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/ydshu/7.png')"/>
      </van-grid-item>
    </van-grid>
  </div>

  <div>
    <div class="px-4"><van-button round type="success" size="large" color="#999999" style="height: 40px;">进入福利场</van-button></div>
  </div>

  <div>

    <span >飙升榜</span>

        <div class="w-screen container">

          <div class="w-max flex   gap-4 ml-4" style="text-align: center">
              <div class="w-32 " v-for="(item, index) in tu" :key="item">
                {{index+8}}
              <van-image :src="require(`@/assets/ydshu/${index+8}.png`)"/>{{index+1}}.{{item}}
            </div>

          </div>

        </div>

  </div>

  <div>
   <div class="px-4>"> <van-button round type="success" size="large" color="#999999" style="height: 40px;">查看飙升榜</van-button></div>
  </div>

  <div>
    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/ydshu/1.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/ydshu/2.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/ydshu/3.png')"/>
        </van-grid-item>

      </van-grid>
    </div>
    </div>



      <div>
       <div class="px-4"><van-button round type="success" size="large" color="#999999" style="height: 40px;">查看新书榜</van-button></div>
      </div>



    <div>
      <div>
        <span class=“text-align:center”>小说榜</span>

        <div class="w-screen container">

          <div class="w-max flex   gap-4 ml-4" style="text-align: center">
            <div class="w-32 h-24" >
              <van-image :src="require('@/assets/ydshu/21.png')"/>1.项塔兰
            </div>
            <div class="w-32 h-24">
              <van-image :src="require('@/assets/ydshu/22.png')"/>2.结构性改革
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/23.png')"/>3.山河故人
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/24.png')"/>1.断头王后
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/25.png')"/>2.我叫刘跃进
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/26.png')"/>3.四棵杨
            </div>
          </div>
        </div>
    </div>
</div>

  <div>
  <div class="px-4">  <van-button round type="success" size="large" color="#999999" style="height: 40px;">查看小说榜</van-button></div>
  </div>

  <div>
    <div>
      <div>
        <span class=“text-align:center”>畅销榜</span>

        <div class="w-screen container">

          <div class="w-max flex   gap-4 ml-4" style="text-align: center">
            <div class="w-32 h-24" >
              <van-image :src="require('@/assets/ydshu/27.png')"/>1.新拍摄笔记
            </div>
            <div class="w-32 h-24">
              <van-image :src="require('@/assets/ydshu/28.png')"/>2.被淹没与被拯救的
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/29.png')"/>3.城南旧事
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/30.png')"/>1.美颜与长生
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/31.png')"/>2.半小时漫画宇宙大爆炸
            </div>
            <div class="w-32">
              <van-image :src="require('@/assets/ydshu/32.png')"/>3.你是吃出来的
            </div>
          </div>
        </div>
      </div>
  </div>
  </div>

  <div>
    <div class="px-4"><van-button round type="success" size="large" color="#999999" style="height: 40px;">查看畅销榜</van-button>
    </div>
  </div>

  <div>
    <span class=“text-align:center”>为你推荐朋友在读</span>
    <div style="size: A3">每日书单</div>
    <img :src="require('@/assets/ydshu/1.png')">
  </div>

</div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from 'vue-router'



    const router=useRouter()
    const value = ref('');
    const anniu=['分类','榜单','书单','会员','免费']
    const tu=ref(['亮剑','朝花夕拾','撒哈拉的故事','麒麟','诊疗椅上的谎言'])
const quxiangqing=function (){router.push('./xiangqing')}
const  a =(index)=>{

if(index ==0){

  router.push('/fenlei')
} else if(index ==1){
  router.push('/bangdan')
}else if(index ==2){
router.push('/shudan')
}else if(index ==3){
  router.push('/huiyuan')
}else if(index ==4){
  router.push('/mianfei')
}

}
    // const anniua=res;
    // const goods={
    //   "title": "己多改分政装",
    //   "goods": [
    //     "dolore enim"
    //   ],
    //   "imges": "http://dummyimage.com/400x400"
    // }



</script>

<style scoped lang="scss">
 /*.box{*/
 /*  width: 100vw;*/
 /*  background: red;*/
 /*}*/
 .box{
   color: #999999;
 }
 .container{
   overflow: scroll;
 }
 .container::-webkit-scrollbar{
   display: none;
 }
</style>
